// @ts-nocheck
export default {
  data: {
    ctx: null,
    num: 0,
    startAngle: Math.PI * 1.5,
    endAngle: Math.PI * 1.5,
  },
  props: {
    cWidth: {
      type: Number,
      default: 200,
    },
    cHeight: {
      type: Number,
      default: 200,
    },
    staticScale:{
      type: Number,
      default: 4,
    },
    text: {
      default: '',
    },
    lineWidth: {
      type: Number,
      default: 20
    },
    cRate: {
      type: Number,
      default: 0
    },
    cColor: {
      type: String,
      default: '#86C1FF,#2B5BF9'
    },
    bgColor:{
      type: String,
      default: '#e9ebed'
    },
    textSize: {
      type: Number,
      default: 32
    }
  },
  onInit() {
  },
  onAttached(){
  },
  onLayoutReady(){
    if(!this.ctx){
      this.initCanvas();
      return;
    }
    let color = this.cColor.split(',');
    this.paint(this.cRate,...color);
  },
  initCanvas(){
    let canvas = this.$refs.canvas;
    this.ctx = canvas.getContext('2d');
    canvas.width = this.cWidth * this.staticScale;
    canvas.height = this.cHeight * this.staticScale;
    this.drawCircle(this.bgColor,0,2 * Math.PI);
    let color = this.cColor.split(',');


    this.paint(this.cRate,...color);
  },
  /**
   * @description: 圆弧切片绘制
   * @param {Number} percent 圆环展示的进度（0~100
   * @param {String} startColor 开始颜色
   * @param {String} endColor 结束颜色
  */
  paint(percent,startColor,endColor){
    percent = percent / 100;
    !endColor ? endColor = startColor : '';

    // 渐变精度，值越小，渐变越缓和
    const unit = 0.3;

    let division = parseInt((Math.PI * 2)/unit);
    // 生成渐变色数组
    let gradient = this.gradientColor(startColor,endColor,division);
    let arr = gradient.slice(this.num, parseInt(percent*gradient.length));
    this.num = parseInt(percent*gradient.length);
    for(let i=0; i < arr.length; i++){
      this.endAngle = this.startAngle+unit;
      this.drawCircle(arr[i],this.startAngle,this.endAngle);
      this.startAngle+=unit;
    }
  },
  /**
   * @description: 绘制圆弧
   * @param {String} color 绘制圆弧的颜色
   * @param {Number} start 绘制圆弧开始位置
   * @param {Number} end 绘制圆弧结束位置
   */
  drawCircle(color,start,end){
    this.ctx.beginPath();
    this.ctx.lineCap = "round";
    this.ctx.lineWidth = this.lineWidth;
    this.ctx.strokeStyle = color;
    this.ctx.arc(
      this.cWidth / 2,
      this.cHeight / 2,
      (this.cWidth / 2) - this.lineWidth,
      start,
      end
    );
    this.ctx.stroke();
  },

  /**
   * @description: 封装颜色渐变之间值
   * @param {String} startColor 开始颜色hex
   * @param {Number} endColor 结束颜色hex
   * @param {Number} step 渐变精度
   * @return {Array}
   */
  gradientColor(startColor,endColor,step){
    let startRGB = this.hexToRgb(startColor);//转换为rgb数组模式
    let endRGB = this.hexToRgb(endColor);

    let sR = (endRGB[0]-startRGB[0])/step;//总差值
    let sG = (endRGB[1]-startRGB[1])/step;
    let sB = (endRGB[2]-startRGB[2])/step;
    var colorArr = [];
    for(var i=0;i<step;i++){
      //计算每一步的hex值
      var hex = this.rgbToHex('rgb('+parseInt((sR*i+startRGB[0]))+','+parseInt((sG*i+startRGB[1]))+','+parseInt((sB*i+startRGB[2]))+')');
      colorArr.push(hex);
    }
    return colorArr;
  },
  // 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
  hexToRgb(sColor){
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    sColor = sColor.toLowerCase();
    if(sColor && reg.test(sColor)){
      if(sColor.length === 4){
        var sColorNew = "#";
        for(var i=1; i<4; i+=1){
          sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
        }
        sColor = sColorNew;
      }
      //处理六位的颜色值
      var sColorChange = [];
      for(let i=1; i<7; i+=2){
        sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
      }
      return sColorChange;
    }else{
      return sColor;
    }
  },

  // 将rgb表示方式转换为hex表示方式
  rgbToHex(rgb){
    var _this = rgb;
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    if(/^(rgb|RGB)/.test(_this)){
      var aColor = _this.replace(/(?:(|)|rgb|RGB)*/g,"").split(",");
      var strHex = "#";
      for(var i=0; i<aColor.length; i++){
        var hex = Number(aColor[i]).toString(16);
        hex = hex<10 ? 0+''+hex :hex;// 保证每个rgb的值为2位
        if(hex === "0"){
          hex += hex;
        }
        strHex += hex;
      }
      if(strHex.length !== 7){
        strHex = _this;
      }
      return strHex;
    }else if(reg.test(_this)){
      var aNum = _this.replace(/#/,"").split("");
      if(aNum.length === 6){
        return _this;
      }else if(aNum.length === 3){
        var numHex = "#";
        for(let i=0; i<aNum.length; i+=1){
          numHex += (aNum[i]+aNum[i]);
        }
        return numHex;
      }
    }else{
      return _this;
    }
  },
}
